<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @import url(https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap);

        .card,
        .content,
        body {
            overflow: hidden;
        }

        body {
            width: 100vw;
            height: 100vh;
            padding: 0;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: black;
        }

        .card,
        .container {
            display: flex;
            align-items: center;
        }

        .card {
            width: 1280px;
            height: 720px;
            margin: 0;
            justify-content: center;
        }

        .container-full,
        .content {
            width: 1000px;
            height: 562px;
        }

        .backgroundImage {
            position: absolute;
            width: 1000px;
        }

        .boyImage {
            position: absolute;
            width: 1000px;
            z-index: 2;
            animation: 200s linear infinite blur;
        }

        .content {
            border-radius: 40px;
            animation: 200s linear infinite brightness;
        }

        .container {
            justify-content: center;
        }

        .container-full,
        .face {
            display: flex;
            align-items: center;
            overflow: hidden;
        }

        .container-full {
            margin: 0;
            justify-content: center;
            transform: scale(1);
            animation: 200s linear infinite zoom-in;
        }

        .cube,
        .face {
            width: 870px;
            height: 190px;
        }

        .cube {
            position: relative;
            transform-style: preserve-3d;
            perspective: 480px;
            transform-style: preserve-3d;
            perspective-origin: 51% 70%;
        }

        .face,
        .hue {
            position: absolute;
        }

        .face {
            background: 0 0;
            border: 0 solid #000;
            opacity: 0.5;
        }

        .bottom,
        .top {
            width: 870px;
            height: 870px;
        }

        p {
            white-space: nowrap;
            overflow: hidden;
            font-family: "Bebas Neue", sans-serif;
            font-weight: 400;
            font-size: calc(6em + (190px / 10) * 0.7);
            padding-top: 20px;
            color: #fff;
        }

        span {
            color: red;
        }

        .front {
            transform: translateZ(435px);
            display: none;
        }

        .back {
            transform: translateZ(-435px) rotateY(180deg) scaleX(-1);
        }

        .left {
            transform: translateX(-435px) rotateY(-90deg) scaleX(-1);
        }

        .right {
            transform: translateX(435px) rotateY(90deg) scaleX(-1);
        }

        .top {
            transform: translateY(-435px) rotateX(90deg) scaleY(-1);
        }

        .bottom {
            transform: translateY(-245px) rotateX(-90deg) scaleY(-1);
        }

        .left p {
            margin-left: 480px;
            animation: 200s linear infinite left;
        }

        .back p {
            margin-left: -390px;
            animation: 200s linear infinite back;
        }

        .right p {
            margin-left: -1260px;
            animation: 200s linear infinite right;
        }

        @keyframes left {
            100% {
                margin-left: -54000px;
            }
        }

        @keyframes back {
            100% {
                margin-left: -54870px;
            }
        }

        @keyframes right {
            100% {
                margin-left: -55740px;
            }
        }

        .hue {
            top: 0;
            left: 0;
            z-index: 3;
            width: 100%;
            height: 100%;
            mix-blend-mode: overlay;
            background: #1e5799;
            background: radial-gradient(ellipse at center, #1e5799 0, #7db9e8 100%);
            opacity: 1;
        }

        .hue.animated {
            -webkit-animation: 8s infinite filter-animation;
            animation: 8s infinite filter-animation;
        }

        .container-reflect {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 380px;
            filter: blur(10px);
        }

        .container-reflect .cube {
            perspective-origin: 51% -30%;
        }

        .container-reflect .back {
            transform: translateZ(-435px) rotateY(180deg) scaleX(-1) scaleY(-1);
        }

        .container-reflect .left {
            transform: translateX(-435px) rotateY(-90deg) scaleX(-1) scaleY(-1);
        }

        .container-reflect .right {
            transform: translateX(435px) rotateY(90deg) scaleX(-1) scaleY(-1);
        }

        .container-reflect p {
            transform: scaleY(70%);
        }

        @keyframes filter-animation {

            0%,
            100% {
                filter: hue-rotate(0deg);
            }

            50% {
                filter: hue-rotate(100deg);
            }
        }

        @keyframes zoom-in {
            0% {
                transform: scale(1);
            }

            100% {
                transform: scale(2.5);
            }
        }

        @keyframes blur {
            0% {
                filter: blur(0px);
            }

            100% {
                filter: blur(3px);
            }
        }

        @keyframes brightness {
            0% {
                filter: brightness(1) contrast(1);
            }

            100% {
                filter: brightness(0.8) contrast(1.3);
            }
        }
    </style>
</head>

<body>
    <div class=container>
        <div class=content style=display:block;width:1000px;height:562px>
            <div class=container-full>
                <div class="animated hue"></div><img class=backgroundImage
                    src="https://drive.google.com/thumbnail?id=1_ZMV_LcmUXLsRokuz6WXGyN9zVCGfAHp&sz=w1920"> <img
                    class=boyImage
                    src="https://drive.google.com/thumbnail?id=1eGqJskQQgBJ67myGekmo4YfIVI3lfDTm&sz=w1920">
                <div class=container>
                    <div class=cube>
                        <div class="face top"></div>
                        <div class="face bottom"></div>
                        <div class="face left text"></div>
                        <div class="face right text"></div>
                        <div class="face front"></div>
                        <div class="face back text"></div>
                    </div>
                </div>
                <div class=container-reflect>
                    <div class=cube>
                        <div class="face top"></div>
                        <div class="face bottom"></div>
                        <div class="face left text"></div>
                        <div class="face right text"></div>
                        <div class="face front"></div>
                        <div class="face back text"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        // Poem text
        const kiplingPoem = `<p>If you can <span>keep</span> your head when all about you    
Are <span>losing</span> theirs and <span>blaming</span> it on you; 
If you can <span>trust</span> yourself when all men <span>doubt</span> you,    
But make <span>allowance</span> for their doubting too; 
If you can <span>wait</span> and not be tired by waiting,    
Or, being <span>lied</span> about, don't deal in <span>lies</span>, 
Or, being <span>hated</span>, don't give way to <span>hating</span>,    
And yet don't look too good, nor talk too wise;
If you can <span>dream</span>—and not make dreams your <span>master</span>; 
If you can <span>think</span>—and not make thoughts your <span>aim</span>; 
If you can meet with <span>triumph</span> and <span>disaster</span>    
And treat those two <span>impostors</span> just the same; 
If you can bear to hear the <span>truth</span> you've spoken    
<span>Twisted</span> by knaves to make a <span>trap</span> for fools, 
Or watch the things you gave your life to <span>broken</span>,    
And <span>stoop</span> and build 'em up with wornout tools;
If you can make one <span>heap</span> of all your <span>winnings</span>    
And <span>risk</span> it on one turn of pitch-and-toss, 
And <span>lose</span>, and start again at your beginnings    
And never breathe a word about your <span>loss</span>; 
If you can <span>force</span> your heart and nerve and <span>sinew</span>    
To <span>serve</span> your turn long after they are gone, 
And so <span>hold on</span> when there is nothing in you    
Except the <span>Will</span> which says to them: "Hold on";
If you can <span>talk</span> with crowds and keep your <span>virtue</span>,    
Or <span>walk</span> with kings—nor lose the common <span>touch</span>; 
If neither <span>foes</span> nor loving friends can hurt you;    
If all men <span>count</span> with you, but none too much; 
If you can fill the unforgiving <span>minute</span> 
With sixty seconds' worth of distance <span>run</span>—    
Yours is the <span>Earth</span> and everything that's in it, 
And—which is more—you'll be a <span>Man</span>, my son!     -Rudyard Kipling</p>`;

        function insertPoemIntoDivs() {
            const textDivs = document.querySelectorAll(".text");

            textDivs.forEach((div) => {
                div.innerHTML = kiplingPoem;
            });
        }

        document.addEventListener("DOMContentLoaded", insertPoemIntoDivs);

        const contentDiv = document.querySelector(".content");
        function adjustContentSize() {
            const viewportWidth = window.innerWidth;
            const baseWidth = 1000;
            const scaleFactor =
                viewportWidth < baseWidth ? (viewportWidth / baseWidth) * 0.8 : 1;
            contentDiv.style.transform = `scale(${scaleFactor})`;
        }
        window.addEventListener("load", adjustContentSize);
        window.addEventListener("resize", adjustContentSize);

    </script>

</body>

</html>